<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录验证码</title>
    <link rel="stylesheet" href="../../css/mui.min.css">
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <style>
        html,
        body {
            background-color: #fff !important;
        }

        .mui-bar-nav {
            background: #fff;
            box-shadow: none;
        }

        .mui-icon-left-nav {
            color: #60C68B;
        }

        .container_box {
            padding: 42px;
            background-color: #fff;
        }

        .cont_top {
            padding: 33px 0;
            padding-bottom: 60px;
        }

        .cont_top h2 {
            color: #333;
            font-size: 18px;
        }

        .cont_top p {
            font-size: 10px;
            color: #999;
        }

        .cont_top p span {
            color: #60C68B;
            font-size: 10px;
        }

        

        /* 验证码样式 */
        .pc_in {
            position: relative;
            width:100%;
            margin: 0 auto;
            height:100px;
        }

        .pc_in div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding: 0 4px;
        }

        .pc_in div span {
            width: 30px;
            height:30px;
            border-bottom:1px solid #ccc;
        }

        .pc_in p {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            background: none;
        }

        .pc_in p input {
            float: left;    
            width:111%;
            height: 70px;
            line-height: 70px;
            letter-spacing:37px;
            background: none;           
            border: none;
        }

        /* end */
        .phone_box p {
            color: #333;
            font-size: 14px;
        }
        .phone_box p a{
            color: #60C68B;
            font-size: 10px;
        }
        .phone_box .rest_number{
            color: #60C68B;
            font-size: 10px;
        }
        .phone_box button {
            margin-top: 30px;
            width: 276px;
            height: 44px;
            line-height: 44px;
            padding: 0;
            color: #fff;
            background: #ccc;
            border-radius: 10px;
        }

        .phone_box .btn_success {
            background: #60C68B;
        }

        .phone_box .tips {
            color: #f00;
            font-size: 14px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header" class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="onclick_dj"></a>
        </header>
        <div class="container_box">
            <div class="cont_top">
                <h2>请输入验证码</h2>
                <p>验证码已发送到手机号 <span>（+86){{YZM_info.phone_msg}}</span></p>
            </div>
            <div class="phone_box">
                <P>6位数字验证码</P>
                <div class="pc_in">
                    <div>
                        <span class="g_hx"></span>
                        <span class="g_hx"></span>
                        <span class="g_hx"></span>
                        <span class="g_hx"></span>
                        <span class="g_hx"></span>
                        <span class="g_hx"></span>
                    </div>
                    <p>
                        <input type="tel" v-model="paymentCodeValue" maxlength="6" >
                    </p>
                </div>
                <p class="rest_number" @click="Resend_message"><a href="javascript:;">重新获取</a></p>
                <p class="tips">{{tip1}}</p>
                <button :class="{btn_success:class_Flag}" @click="submit_yzm">确认</button>
            </div>
        </div>
    </div>
	<script src="../../js/vue-resource.js"></script>
	<script src="../../js/base.js"></script>
    <script>
		
	mui.plusReady(function() {//接受上个页面的传值!
		var current_window = plus.webview.currentWebview();
		vm.YZM_info=current_window;
		vm.YZM_info.phone_number=current_window.phone_msg;
		vm.YZM_info.userType=current_window.userType;
	})
        var vm = new Vue({
            el: '#app',           
            data: {
				YZM_info:{
					phone_number:"",//注册或则登陆的手机号
					userType:""
				},
                class_Flag: false,//按钮是否绿色
                tip1: '',
                paymentCodeValue: '',
				code:""//随机6位数
            },
            methods: {
                onclick_dj() {
                    window.history.go(-1);
                },
                getCode() {
                    return this.code;
                },
                zh() {
                    this.tip1 = '';
                    var gz = /^\d{6}$/;
                    if (!this.paymentCodeValue) {
                        this.tip1 = '验证码不能为空';
                        this.class_Flag = false;
                    }
                    else if (!gz.test(this.paymentCodeValue)) {
                        this.tip1 = "*验证码错误*";
                        this.class_Flag = false;
                    }
                    else {
                        this.class_Flag = true;
                    }
                },
				Resend_message(){//重新发送短信
					HTTP.post(this, 'loginController/sendMessage', function(res) {						
						mui.toast("发送成功");
					}, function(res) {
						mui.toast(res);
					}, {
						phoneNum: this.YZM_info.phone_number,
						code: this.code,
						userType: this.YZM_info.userType 
					})
				},
                submit_yzm() {//发送验证码！
                    this.tip1 = '';
                    var gz = /^\d{6}$/;
                    if (!this.paymentCodeValue) {
                        this.tip1 = '验证码不能为空';
                        this.class_Flag = false;
                        return;
                    }
                    else if (!gz.test(this.paymentCodeValue)) {
                        this.tip1 = "*验证码错误*";
                        this.class_Flag = false;
                        return;
                    }
                    else {
                        this.class_Flag = true;
                        // 执行正确的命令
						plus.nativeUI.showWaiting();
						var that=this;
						HTTP.post(this, 'loginController/login', function(res) {
							// 传值值!打开页面会员中心：
							// 如果成功把res.data 保存到 本地存储中
							
							// console.log(JSON.stringify(res.data));
							
							plus.storage.setItem('_id',res.data);
							plus.storage.setItem('_name',JSON.stringify(that.YZM_info.phone_number));
							mui.toast("登录成功");
							
							var current_window =  plus.webview.currentWebview(),
								login_index = plus.webview.getWebviewById('login_index.html'),
								member_window = plus.webview.getWebviewById('html/member.html');
								
							//用来执行一个自定义的事件.(让一个页面，执行一个自定义事件。) 补充:在那个页面中去监听这个事件,被运行,
							mui.fire(member_window, 'member-reload');
							
							setTimeout(function() {
								plus.webview.close(login_index);
								plus.webview.close(current_window);
							}, 1000);
							//先关闭2个页面,在打开会员中心
							// var login_index=plus.webview.getWebviewById('html/member.html');
							// var login_index2=plus.webview.getWebviewById('login_index.html');
							//关闭
							// plus.webview.currentWebview().close();
							// plus.webview.close(login_index2);
							//打开
							// plus.webview.show(login_index, 'slide-in-right', 300);
						}, function(res) {
							mui.toast(res);
						}, {
							sourceType: "2",//1-PC  2-APP
							phoneNum: that.YZM_info.phone_number,//手机号
							code: that.paymentCodeValue ,//验证码
							userType:that.YZM_info.userType//用户类型
						})
						
						
                    }
                }
            },
            created() {
					//生成随机6位数
					var code = "";
				　　for(let i=0;i<5;i++){
				　　　　var radom = Math.floor(Math.random()*10);
				　　　　code += radom;
				　　}
					// 保证第一位数字不为零
					var num = Math.ceil(Math.random()*1000000000%9);
					this.code=num+code;
            },
			watch: {
				paymentCodeValue: function (val) {
					if(val.length=="6"){
						this.zh();
					}
					else{
						this.zh();
					}
				},
			}
        })
    </script>
</body>

</html>